<template>
  <div class="tableList">
    <!-- 直接使用vuex的数据 -->
    <el-table :data="goodList" border style="width: 100%">
      <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
      <el-table-column prop="goods_price" label="价格"> </el-table-column>
      <el-table-column prop="goods_weight" label="重量"> </el-table-column>
      <el-table-column prop="add_time" label="创建时间"> </el-table-column>
      <el-table-column label="操作" min-width="110px" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
            v-has="116"
            :disabled="!$store.state.btn_permission.includes('116')"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="del(scope.row)"
            v-has="117"
            :disabled="!$store.state.btn_permission.includes('117')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getGoodList, delGood } from "@/api/goods";

export default {
  name: "tableList",
  data() {
    return {
      goodList: [],
      currentPage: 1,
      pageNum: 6,
      searchContent: "",
    };
  },
  created() {
    this.initGoodList();
  },
  mounted() {
    //先销毁（防止多次执行）
    this.$bus.$off("currentPageChange");
    //更改页码后重新获取数据
    this.$bus.$on("currentPageChange", (currentPage) => {
      this.currentPage = currentPage;
      this.initGoodList();
    });

    //获取搜索内容、添加后更新页面
    this.$bus.$off("searchChange").$on("searchChange", (searchContent) => {
      this.searchContent = searchContent;
      this.currentPage = 1;
      this.initGoodList();
    });
  },
  methods: {
    initGoodList() {
      getGoodList(this.currentPage, this.pageNum, this.searchContent).then(
        (res) => {
          // console.log(res.data);
          if (res.data.status !== 200 && res.data.message == "不存在商品信息") {
            this.currentPage > 0 && this.currentPage--;
            return this.initGoodList();
          }
          this.goodList = res.data.data;
          this.$bus.$emit("getTotalNum", res.data.totalNum);
        },
        (err) => {
          this.$message.error(err.message ? err.message : err);
        }
      );
    },
    showEditDialog(row) {},
    del(row) {
      //逻辑删除
      // console.log(row.goods_id);
      this.$confirm("删除当前商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //请求删除
          delGood(row.goods_id).then((res) => {
            if (res.data.status !== 200) {
              return this.$message.error("删除商品失败");
            }
            this.$message.success("删除商品成功");
            this.initGoodList();
          });
        })
        .catch(() => {
          this.$message.info("已取消删除!");
        });
    },
  },
};
</script>

<style  scoped>
.tableList {
  margin: 0 20px;
}
.el-button {
  padding: 10px 15px;
  margin-left: 2px;
}
</style>
